<template>
  <div class="mine">
    <div class="user-info">
      <div class="avatar-wrap" @click="goToLogin">
        <van-image
          round
          width="64"
          height="64"
          :src="userInfo.avatar || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
        />
      </div>
      <div class="user-status" v-if="!isLogin" @click="goToLogin">
        <span class="login-tip">未登录</span>
        <span class="auth-tip">点击登录/注册</span>
      </div>
      <div class="user-status" v-else>
        <span class="username">{{ userInfo.username }}</span>
        <template v-if="!userInfo.isVerified">
          <span class="auth-status not-authenticated" @click="goToAuth">
            未实名认证
          </span>
          <span class="auth-tip">点击进行实名认证，享受完整服务</span>
        </template>
        <span v-else class="auth-status authenticated">
          已实名认证
        </span>
      </div>
    </div>

    <div class="menu-list">
      <van-cell-group inset>
        <van-cell 
          title="我的订单" 
          is-link 
          to="/order"
          :disabled="!isLogin"
        />
        <van-cell 
          title="我的评价" 
          is-link 
          to="/comment"
          :disabled="!isLogin"
        />
        <van-cell 
          v-if="!userInfo.isVerified && isLogin"
          title="实名认证" 
          is-link 
          to="/auth"
        />
        <van-cell title="关于我们" is-link to="/about" />
      </van-cell-group>

      <van-button 
        v-if="isLogin"
        class="logout-btn" 
        block 
        type="danger" 
        @click="handleLogout"
      >
        退出登录
      </van-button>
    </div>

    <!-- 未认证提示 -->
    <van-dialog
      v-model:show="showAuthTip"
      title="温馨提示"
      confirm-button-text="去认证"
      cancel-button-text="暂不认证"
      @confirm="goToAuth"
      @cancel="closeAuthTip"
      :show-cancel-button="true"
      :closeOnClickOverlay="true"
    >
      <div class="auth-dialog-content">
        <p>您还未完成实名认证</p>
        <p>认证后可享受以下服务：</p>
        <ul>
          <li>租车服务</li>
          <li>在线支付</li>
          <li>评价服务</li>
        </ul>
        <div class="tip-footer">
          <van-checkbox v-model="neverShowTip">不再提示</van-checkbox>
        </div>
      </div>
    </van-dialog>

    <TabBar />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showDialog } from 'vant';
import { useUserStore } from '@/stores/user';
import { getUserById } from '@/api/user';

const router = useRouter();
const userStore = useUserStore();
const showAuthTip = ref(false);
const neverShowTip = ref(false);

const isLogin = computed(() => userStore.isLogin);
const userInfo = computed(() => userStore.userInfo || {});

// 获取用户详细信息
const fetchUserDetail = async () => {
  if (isLogin.value && userInfo.value.id) {
    try {
      const data = await getUserById(userInfo.value.id);
      userStore.$patch({
        userInfo: {
          ...userStore.userInfo,
          ...data
        }
      });
    } catch (error) {
      console.error('获取用户详情失败:', error);
    }
  }
};

// 去登录
const goToLogin = () => {
  if (!isLogin.value) {
    router.push('/login');
  }
};

// 去认证
const goToAuth = () => {
  if (!isLogin.value) {
    router.push('/login');
    return;
  }
  router.push('/auth');
};

// 退出登录
const handleLogout = () => {
  showDialog({
    title: '提示',
    message: '确定要退出登录吗？',
    showCancelButton: true,
  }).then(() => {
    userStore.logout();
    router.push('/login');
  });
};

// 关闭认证提示
const closeAuthTip = () => {
  if (neverShowTip.value) {
    localStorage.setItem('neverShowAuthTip', 'true');
  }
  showAuthTip.value = false;
};

onMounted(() => {
  fetchUserDetail();
  
  // 检查是否显示认证提示
  const neverShow = localStorage.getItem('neverShowAuthTip');
  if (isLogin.value && !userInfo.value.isVerified && !neverShow) {
    showAuthTip.value = true;
  }
});
</script>

<style scoped lang="scss">
.mine {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 50px;
}

.user-info {
  background: #fff;
  padding: 20px 16px;
  display: flex;
  align-items: center;

  .avatar-wrap {
    margin-right: 16px;
  }

  .user-status {
    flex: 1;

    .username {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-bottom: 4px;
      display: block;
    }

    .login-tip {
      font-size: 18px;
      color: #333;
      margin-bottom: 4px;
      display: block;
    }

    .auth-tip {
      font-size: 14px;
      color: #999;
    }

    .auth-status {
      font-size: 14px;
      margin: 4px 0;
      display: block;
      
      &.authenticated {
        color: #00b578;
      }
      
      &.not-authenticated {
        color: #ff976a;
      }
    }
  }
}

.menu-list {
  padding: 12px;
  margin-top: 12px;

  .van-cell-group {
    margin-bottom: 12px;
  }

  .logout-btn {
    margin-top: 20px;
  }
}

.auth-dialog-content {
  padding: 16px;
  
  p {
    margin: 8px 0;
    color: #333;
  }
  
  ul {
    padding-left: 20px;
    margin: 8px 0;
    
    li {
      color: #666;
      margin: 4px 0;
    }
  }
}

.tip-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
</style> 